﻿<!DOCTYPE html>

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
    <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
    <title>消息</title>
    <link href="css/chat2.css" rel="stylesheet" />
</head>
<body>
    <header class="header">
        <a class="back" href="#" onclick="history.back();"></a>
        <h5 id="Person" data-userid="" class="tit">黄经理</h5>
    </header>
    <div id="message" class="message">
        <div class="send">
            <div class="time">05/22 06:30</div>
            <div class="msg">
                <img src="img/head.jpg" style="width:35px" alt="" />
                <p><i class="msg_input"></i>你好在不在呀，妹子！</p>
            </div>
        </div>
        <div class="show">
            <div class="time">05/22 06:30</div>
            <div class="msg">
                <img src="img/head.jpg" style="width:35px" alt="" />
                <p><i clas="msg_input"></i>你好你好你好</p>
            </div>
        </div>

    </div>
    <div class="footer">
        <input type="text" />
        <p>发送</p>
    </div>
</body>
</html>
<script src="js/jquery.min.js"></script>
<script>
    (function (doc, win) {
        var docEl = doc.documentElement,
            resizeEvt = 'orientationchange' in window ? 'orientationchange' : 'resize',
            recalc = function () {
                var clientWidth = docEl.clientWidth;
                if (!clientWidth) return;
                if (clientWidth >= 720) {
                    docEl.style.fontSize = '100px';
                } else {
                    docEl.style.fontSize = 100 * (clientWidth / 720) + 'px';
                }
            };

        if (!doc.addEventListener) return;
        win.addEventListener(resizeEvt, recalc, false);
        doc.addEventListener('DOMContentLoaded', recalc, false);
    })(document, window);
</script>
<script>
    /*发送消息*/
    function send(headSrc, str) {
        var html = "<div class='send'><div class='msg'><img src=" + headSrc + " style='width: 35px' alt=''  />" +
            "<p><i class='msg_input'></i>" + str + "</p></div></div>";
        upView(html);
    }

    /*接受消息*/
    function show(headSrc, str) {
        var html = "<div class='show'><div class='msg'><img src=" + headSrc + " style='width: 35px' alt=''  />" +
            "<p><i class='msg_input'></i>" + str + "</p></div></div>";
        upView(html);
    }

    /*更新视图*/
    function upView(html) {
        $('.message').append(html);
        $('body').animate({ scrollTop: $('.message').outerHeight() - window.innerHeight }, 200)
    }

    function sj() {
        return parseInt(Math.random() * 10)
    }

    function getRequest(name) {

        var reg = new RegExp("(^|&)" + name + "=([^&]*)(&|$)", "i");

        var r = window.location.search.substr(1).match(reg);

        if (r != null) return (r[2]); return null;

    }

    $(function () {
        var user = decodeURI(getRequest("user"));
        console.log(user);

        $('.footer').on('keyup', 'input', function () {
            if ($(this).val().length > 0) {
                $(this).next().css('background', '#114F8E').prop('disabled', true);

            } else {
                $(this).next().css('background', '#ddd').prop('disabled', false);
            }
        })
        $('.footer p').click(function () {
            show("./img/head.jpg", $(this).prev().val());
            test();
        })
    })

    /*测试数据*/
    var arr = ['我是小Q', '好久没联系了！', '你在想我么', '怎么不和我说话', '跟我聊会天吧'];
    var imgarr = ['img/head.jpg', 'img/head.jpg']
    //test();
    function test() {
        $(arr).each(function (i) {
            setTimeout(function () {
                send("img/head.jpg", arr[i])
            }, sj() * 500)
        })
    }
</script>